﻿<template>
    <div v-if="isVisible" class="modal">
      <div class="modal-content">
        <h2 class="title">收录量表</h2>
        <div class="frame">
          <div class="message">
            当我们收录该测评量表时，我们会第一时间以短信的方式通知您。
          </div>
          <div>
            <div class="message">测评量表:</div>
            <el-input
              type="textarea"
              v-model="form.input1"
              placeholder="精简的描述量表信息帮助我们更快的收录它"
              :rows="4"
              resize="none"
            >
            </el-input>
          </div>
          <div>
            <div class="message">联系方式(非必填):</div>
            <el-input v-model="form.input2" placeholder="请输入您的电话号码" />
          </div>
          <div class="foot">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ElMessage } from "element-plus";
  import { defineProps, reactive } from "vue";
  
  const form = reactive({
    input1: "",
    input2: "",
  });
  
  defineProps(["isVisible"]);
  
  const emit = defineEmits(["close", "submit"]);
  
  const submit = () => {
    if (!form.input1) {
      ElMessage.error("测试量表一栏不能为空");
    } else {
      // 提交逻辑
      emit("submit");
      console.log("提交表单");
    }
  };
  const cancel = () => {
    emit("close");
  };
  </script>
  
  <style scoped>
  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1; /* 置于顶层 */
  
    /* 其他样式 */
    width: 100%; /* 宽度占满屏幕 */
    height: 100%; /* 高度占满屏幕 */
    background-color: rgb(0, 0, 0); /* 背景颜色 */
    background-color: rgba(0, 0, 0, 40%); /* 黑色背景，带有透明度 */
    transition: opacity 0.5s ease;
    transform: translate(-50%, -50%);
  }
  
  .modal-content {
    width: 600px; /* 宽度 */
    padding: 20px;
    margin: 10% auto; /* 15% 顶部和底部空间，水平居中 */
    background-color: #fefefe;
    border: 1px solid #888;
    border-radius: 8px;
  }
  
  .frame {
    display: flex;
    flex-direction: column;
  }
  
  .title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
  }
  
  .message {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .name {
    margin: 20px;
  }
  
  .foot {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  
  .el-button {
    width: 100%;
    border-radius: 8px;
  }
  
  .el-message {
    position: fixed;
    top: 10px; /* 距离顶部10px */
    right: 10px; /* 距离右侧10px */
  }
  </style>
  